<template>
  <div>
      关于我们
      <hr>
      <ul class="nav">
          <!-- <router-link to="/about" exact tag="li">
                <a>study</a>
          </router-link>
          <router-link to="/about/work" tag="li">
                <a>work</a>
          </router-link>
          <router-link to="/about/hobby" tag="li">
                <a>hobby</a>
          </router-link> -->

          <router-link :to="{name:'About'}" exact tag="li">
                <a>study</a>
          </router-link>
          <router-link :to="{name:'Work'}" tag="li">
                <a>work</a>
          </router-link>
          <router-link :to="{name: 'Hobby'}" tag="li">
                <a>hobby</a>
          </router-link>
      </ul>
      <hr>
				
      <router-view></router-view>
      测试数据：{{test}}
  </div>
</template>

<script>
    export default {
    	data(){
    		return{
    			test: '改变前'
    		}
    	},
    	beforeCreate(){
    		console.log("beforeCreate")
    	},
			beforeRouteEnter(to,from,next){
				console.log("beforeRouteEnter")
				console.log(this)
				next((vm) => {
					vm.test = '改变了'
				})
			},
			beforeRouteUpdate(to,from,next){
				console.log("beforeRouteUpdate")
				next()   //不加next  是不会刷新的 且进入页面的
			},
			beforeRouteLeave(to,from,next){
				console.log("beforeRouterLeave")
				next()
			}
    }
</script>

<style>

</style>

